<!DOCTYPE html>

<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>我要还书</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../plugins/elementui/index.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js"></script>
		<script src="../plugins/elementui/index.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/axios-0.18.0.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}

			.el-menu {
				border: none;
				border-right-width: 0;
			}

			.el-button {
				border: none;
				margin-left: 10px;
			}

			.buttonColor {
				background-color: rgb(32, 155, 159);
			}

			.buttonColor:hover {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor:focus {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor2:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li.active {
				color: rgba(32, 155, 159, 0.773)
			}
		</style>
	</head>

	<body style="background-color: #545c64;">
		<div id="app">
			<el-header style="text-align: left; background-color: rgba(1, 12, 21, 0.421);">
				<div style="font-size: 20px; color:rgb(32, 155, 159)">
					<div style="float: left;">
						<span>图书管理平台</span></div>
					<div style="float: right; font-size: 15px;">
						<a @click="logout()" style="color:rgb(32, 155, 159); cursor:pointer;">安全退出</a></div>
					<div style="width: 100px; float: right; font-size: 15px;">
						<a href="personal.html" style="color: rgb(32, 155, 159);">{{ name }}</a>
					</div>
				</div>
			</el-header>
			<el-container style="height: auto;">
				<el-aside width="200px" style="background-color: rgba(1, 12, 21, 0);">
					<el-menu default-active="4" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="rgb(32, 155, 159)" style="background-color: rgba(1, 12, 21, 0.7); color: white;">
						<el-menu-item index="1" class="el-menu-item" @click="load1()" style="border-right: none;"><i class="el-icon-chat-line-square"></i>借书必读</el-menu-item>
						<el-menu-item index="2" class="el-menu-item" @click="load2()" style="border-right: none;"><i class="el-icon-postcard"></i>个人信息</el-menu-item>
						<el-menu-item index="3" class="el-menu-item" @click="load3()" style="border-right: none;"><i class="el-icon-search"></i>我要借书</el-menu-item>
						<el-menu-item index="4" class="el-menu-item" @click="load4()" style="border-right: none;"><i class="el-icon-document-copy"></i>我要还书</el-menu-item>
					</el-menu>
				</el-aside>

				<!-- <el-container> -->
				<el-main>
					<div class="content-header">
						<h1>我要还书</h1>
					</div>
					<div class="app-container">
						<div class="box">
							<div class="filter-container">
								<el-button type="primary" @click="getNotReturnRecords()" class="buttonColor butT">查询未还记录</el-button>
								<el-button type="primary" @click="getAll()" class="buttonColor butT">查询所有借阅</el-button>
							</div>
							<el-table size="small" border current-row-key="id" :data="currentPageData" stripe highlight-current-row>
								<el-table-column type="index" align="center" label="序号"></el-table-column>
								<el-table-column prop="lentId" label="借阅编号" align="center"></el-table-column>
								<el-table-column prop="bookId" label="图书编号" align="center"></el-table-column>
								<el-table-column prop="bookName" label="图书名称" align="center"></el-table-column>
								<el-table-column prop="username" label="用户账号" align="center"></el-table-column>
								<el-table-column prop="name" label="用户姓名" align="center"></el-table-column>
								<el-table-column prop="lentDate" :formatter="formatTime" label="借阅时间" align="center"></el-table-column>
								<el-table-column prop="returnDate" :formatter="formatTime" label="还书时间" align="center"></el-table-column>
								<el-table-column prop="bill" label="账单（元）" align="center"></el-table-column>
								<el-table-column label="操作" align="center">
									<template slot-scope="scope">
										<el-button type="primary" size="mini" class="buttonColor" @click="returnBook(scope.row)">还书</el-button>
									</template>
								</el-table-column>
							</el-table>
							<!-- 分页工具条 -->
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
							</el-pagination>
						</div>
					</div>
				</el-main>
				<!-- </el-container> -->
			</el-container>
		</div>

	</body>

	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				pagination: {},
				name: '',
				flag: true, // 定位是查所有还是查未还
				dataList: [], //所有数据
				totalPage: 1, // 统共页数，默认为1
				currentPage: 1, //当前页数 ，默认为1
				pageSize: 10, // 每页显示数量
				pageSizes: [10, 20, 40], // 页码划分
				currentPageData: [], //当前页显示内容
				headPage: 1,
				total: 40,
			},

			//钩子函数，VUE对象初始化完成后自动执行
			created() {
				this.name = localStorage.getItem("name");
				if (localStorage.getItem("username") == null){
					alert('请先登录!!!');
					window.location.href = "../index.html";
				}
				this.getNotReturnRecords();
			},

			methods: {
				// 退出登录
				logout() {
					localStorage.removeItem("username");
					localStorage.removeItem("password");
					localStorage.removeItem("name");
					window.location.href = "../index.html";
				},
				// 网页跳转
				load1() {
					window.location.href = "required.html";
				},
				load2() {
					window.location.href = "personal.html";
				},
				load3() {
					window.location.href = "search.html";
				},
				load4() {
					window.location.href = "record.html";
				},

				// 分页工具
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					this.pageSize = val;
					this.getCurrentPageData();
				},
				handleCurrentChange(val) {
					console.log(`当前页第 ${val} 页`);
					console.log(`总共 ${this.totalPage} 页`);
					console.log(`总共 ${this.total} 条数据`)
					this.currentPage = val;
					this.getCurrentPageData();
				},
				getCurrentPageData() {
					let begin = (this.currentPage - 1) * this.pageSize;
					let end = this.currentPage * this.pageSize;
					this.currentPageData = this.dataList.slice(
							begin,
							end
					);
				},

				//获取全部借书记录
				getAll() {
					//发送ajax请求
					axios.get("/lentRecord/" + localStorage.getItem("username")).then((res) => {
						if (res.data.code == 20041) {
							this.dataList = res.data.data;
							this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
							this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
							this.total = this.dataList.length;
							this.getCurrentPageData();
							this.flag = true;
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},

				// 获取未还借阅记录
				getNotReturnRecords() {
					axios.get("/lentRecord/not/" + localStorage.getItem("username")).then((res) => {
						if (res.data.code == 20041) {
							this.dataList = res.data.data;
							this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
							this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
							this.total = this.dataList.length;
							this.currentPage = 1;
							this.getCurrentPageData();
							this.flag = false;
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},

				// 还书
				returnBook(row) {
					if(row.returnDate != null){
						this.$message.warning("您已还这本书，请重新选择~");
						return;
					}
					axios.put("/lentRecord", row).then((res) => {
						if (res.data.code == 20031) {
							if(this.flag == false){
								let index = this.dataList.indexOf(row);
								this.dataList.splice(index, 1);
								this.getCurrentPageData();
							}else{
								this.getAll();
							}
							this.$message.success("还书成功！一共消费" + res.data.data.bill + "元");
							// 还书要扣钱
							// axios.get("/lentRecord/" + row.lentId).then((res) => {
							// 	console.log(res.data.data);
							// 	if(res.data.code == 20041){
							// 		this.$message.success("还书成功！一共消费" + res.data.data.bill + "元");
							// 	}
							// })
						} else if (res.data.code == 20030) {
							this.$message.error("还书失败!");
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},

				// 时间格式转换
				formatTime(row, column){
					let data = row[column.property]
					if(data == null)
						return data
					let dtime = new Date(data)
					const year = dtime.getFullYear()
					let month = dtime.getMonth() + 1
					if (month < 10) {
						month = '0' + month
					}
					let day = dtime.getDate()
					if (day < 10) {
						day = '0' + day
					}
					let hour = dtime.getHours()
					if (hour < 10) {
						hour = '0' + hour
					}
					let minute = dtime.getMinutes()
					if (minute < 10) {
						minute = '0' + minute
					}
					let second = dtime.getSeconds()
					if (second < 10) {
						second = '0' + second
					}
					return year+ '-' + month+ '-' + day + ' ' + hour + ':' + minute + ':' + second
				},
			}
		})
	</script>

</html>